<template>
  <div class="v-diagram-table-configuration">
    <div>
      <div class="title">筛选条件配置</div>
      <div class="filter_contianer">
        <span>元素选择</span>
        <div class="element_filter">
          <div
            v-for="(item, index) of valueData"
            :key="index"
            class="value-item"
          >
            <span>
              <img
                style="margin-right: 4px; height: 16px"
                :src="item.icon"
              />
              <span v-if="item.name">{{ locale.getTByKey(`modelConfig.${item.name}`, item.name) }}</span>
            </span>
          </div>
          <div
            v-if="!diagramCustomizationManagementModel.isModelDisabled"
            class="add-btn"
          >
            <img
              src="statics/icons/app/iconmore.png"
              class="g-pointer"
              @click="handleChooseType"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="v-comp-columnIds">
      <div class="title">
        结果展示配置
        <el-icon
          v-if="!diagramCustomizationManagementModel.isModelDisabled"
          style="float: right; top: 10px; right: 16px; cursor: pointer"
          @click="clearColumnIds"
        >
          <Delete />
        </el-icon>
      </div>
      <div class="v-comp-select-container">
        <div class="v-comp-select-container-left">
          <div
            v-for="item in propertyList"
            :key="item.key"
            class="left-list-item"
            :class="{ selected: item.key === leftSelectedItem?.key }"
            @click="leftSelectedItem = item"
          >
            {{ locale.getTByKey(`propertyConfig.${item.key}`, item.name) }}
          </div>
        </div>
        <div class="operate-area">
          <el-button
            :disabled="diagramCustomizationManagementModel.isModelDisabled || !leftSelectedItem"
            :icon="Plus"
            @click="addToRight"
          ></el-button>
        </div>
        <div class="v-comp-select-container-right">
          <div
            v-for="(item, index) in selectedPropertyList"
            :key="item.key"
            class="right-list-item"
            :class="{ selected: currentIndex === index }"
            :draggable="!diagramCustomizationManagementModel.isModelDisabled"
            @click="handleClickRightItem(index)"
            @dragstart="dragstart(item.key, index)"
            @dragenter="dragenter(item.key, $event)"
            @dragend="dragend()"
            @dragover="dragover($event)"
          >
            {{ locale.getTByKey(`propertyConfig.${item.key}`, item.name) }}
            <CircleCloseFilled
              v-if="currentIndex === index && !diagramCustomizationManagementModel.isModelDisabled"
              class="delete-icon"
              @click.stop="removeRightItem(index)"
            ></CircleCloseFilled>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { modelService } from "@/modules/model/service";
import { ModelData } from "@/constants/types";
import { ref, watch } from "vue";
import { modelTreeSelectWindow } from "../../../modelTreeSelect";
import { DiagramCustomizationManagementModel } from "../../DiagramCustomizationManagementModel";
import { Plus, CircleCloseFilled, Delete } from "@element-plus/icons";
import { locale } from "@/util/locale";

type ElementItem = { key: string; name: string };

const props = defineProps<{
  diagramCustomizationManagementModel: DiagramCustomizationManagementModel;
}>();

// 元素选择展示内容
const valueData = ref<ModelData[]>([]);
// 左侧属性列表
const propertyList = ref<ElementItem[]>([]);
// 右侧选中的属性列表
const selectedPropertyList = ref<ElementItem[]>([]);

watch(
  () => props.diagramCustomizationManagementModel.diagramTableConfigurationModel.elementIds,
  newVal => {
    modelService
      .getModelDatas(props.diagramCustomizationManagementModel.queryParams.projectId, newVal)
      .then(res => (valueData.value = res));
    modelService
      .queryElementProperties({ projectId: props.diagramCustomizationManagementModel.queryParams.projectId, modelIds: newVal })
      .then((res: ElementItem[]) => {
        propertyList.value = res;
        props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds =
          props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds.filter(it => {
            return res.find(column => column.key === it);
          });
        selectedPropertyList.value = propertyList.value.filter(
          it => props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds.indexOf(it.key) > -1
        );
      });
  },
  { immediate: true }
);
watch(
  () => props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds,
  newVal => {
    selectedPropertyList.value = newVal
      .map(key => propertyList.value.find(it => key === it.key))
      .filter(it => it !== undefined) as unknown as ElementItem[];
  },
  { immediate: true }
);

const handleChooseType = () => {
  modelTreeSelectWindow.popup(
    {
      loadMethod: "getElementsAndStereotypes",
      loadParams: JSON.stringify({
        row: {},
        projectId: props.diagramCustomizationManagementModel.queryParams.projectId
      }),
      checkedIds: [...props.diagramCustomizationManagementModel.diagramTableConfigurationModel.elementIds],
      checkable: true,
      attrTip: "ElementType",
      title: "选择元素类型",
      delay: true
    },
    async data => {
      if (!data.success) return;
      props.diagramCustomizationManagementModel.diagramTableConfigurationModel.elementIds = data.selectedId;
      modelTreeSelectWindow.done();
    }
  );
};

// 左侧选中项
const leftSelectedItem = ref();

// 点击中间加号，将选中的属性放到右边
const addToRight = () => {
  if (leftSelectedItem.value) {
    if (props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds.indexOf(leftSelectedItem.value.key) > -1) {
      app.$notify({
        title: "提示",
        message: "列表中已存在",
        type: "error"
      });
      return;
    }
    props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds = [
      ...props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds,
      leftSelectedItem.value.key
    ];
  }
};
const clearColumnIds = () => {
  props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds = [];
};

// 右侧列表拖拽排序
let dargIndex = ref(-1);
let oldData: string | null = null;
let newData: string | null = null;
const dragstart = (value, index) => {
  oldData = value;
  dargIndex.value = index;
  currentIndex.value = -1;
};
const dragenter = (value, e) => {
  newData = value;
  e.preventDefault();
};
const dragover = e => {
  e.preventDefault();
};
const dragend = () => {
  if (oldData && newData && oldData !== newData) {
    let oldIndex = props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds.indexOf(oldData);
    let newIndex = props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds.indexOf(newData);

    let newItems = [...props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds];
    newItems.splice(oldIndex, 1);
    newItems.splice(newIndex, 0, oldData);
    props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds = [...newItems];
  }
  dargIndex.value = -1;
};

// 右侧当前选中项
const currentIndex = ref(-1);
const handleClickRightItem = index => {
  if (props.diagramCustomizationManagementModel.isModelDisabled) return;
  if (currentIndex.value === index) {
    currentIndex.value = -1;
  } else {
    currentIndex.value = index;
  }
};
const removeRightItem = index => {
  props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds.splice(index, 1);
  props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds = [
    ...props.diagramCustomizationManagementModel.diagramTableConfigurationModel.columnIds
  ];
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/theme.scss";
.v-diagram-table-configuration {
  height: 100%;
  .filter_contianer {
    display: flex;
    align-items: center;
    border: 1px solid #dcdfe6;
    height: 60px;
    width: 100%;
    padding-right: 30px;
    padding-left: 11px;
    line-height: 60px;
    .element_filter {
      border: 1px solid #dcdfe6;
      display: inline-block;
      height: 24px;
      flex-grow: 1;
      margin-left: 8px;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: normal;
      .value-item {
        display: inline-block;
        height: 16px;
        margin: 4px 10px 4px 4px;
        line-height: 16px;
        img {
          margin-right: 6px;
          line-height: 16px;
          vertical-align: middle;
        }
        span {
          line-height: 14px;
          vertical-align: middle;
        }
      }
      .add-btn {
        line-height: 1;
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
      }
    }
  }
  .v-comp-columnIds {
    height: calc(100% - 128px);
    .v-comp-select-container {
      flex: 1;
      display: flex;
      overflow: hidden;
      border: 1px solid #e4e4e4;
      height: calc(100% - 28px);
      .v-comp-select-container-left {
        flex: 1;
        height: calc(100% - 32px);
        overflow: auto;
        margin: 16px;
        .left-list-item {
          height: 20px;
          line-height: 20px;
        }
        .selected {
          background-color: antiquewhite;
        }
      }
      .v-comp-select-container-right {
        flex: 1;
        height: calc(100% - 32px);
        overflow: auto;
        margin: 12px 16px;
        .right-list-item {
          position: relative;
          height: 24px;
          line-height: 24px;
          margin-right: 5px;
          margin-top: 5px;
          padding-left: 2px;
        }
        .selected {
          border: 1px solid $theme-color;
        }
        .delete-icon {
          position: absolute;
          top: -6px;
          right: -6px;
          width: 14px;
          height: 14px;
          cursor: pointer;
        }
      }
      .operate-area {
        width: 130px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        button {
          margin: 0;
          width: 64px;
          height: 28px;
          border-radius: 0;
          margin-bottom: 16px;
        }
      }
    }
  }

  .title {
    height: 24px;
    line-height: 24px;
    padding-left: 12px;
    margin: 12px 0 12px;
  }
}
</style>
